<script setup>
import { onMounted, ref } from 'vue'
import Footer from '@/components/footer.vue'
import request from '@/utils/request'
import { loginStore } from '@/stores/login'
import { ArrowDown, ShoppingCart } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const login = loginStore()

const typeList = ref([])
const getType = async () => {
    const res = await request.get('/type')
    typeList.value = res.data.data
}

onMounted(() => {
    getType()
})


const dialog = ref(false)

const outlogiin = () => {
    dialog.value = true
}


const out = () => {
    localStorage.removeItem('loginStore')
    router.push('/login')
    ElMessage({
        type: 'success',
        message: '退出登录'
    })
}


const goCart = () => {
    if (JSON.parse(localStorage.getItem('loginStore')) == null) {
        ElMessage({
            type: 'warning',
            message: '未登录！！！'
        })
        return
    }
    router.push('/cart')
}

const img = ref(login.avatar)
const uploadFile = async (data) => {
    const File = data.file
    // console.log(File)
    // let formDataInfo = new FormData();
    // formDataInfo.append("file", File);
    const res = await request.post('/upload', { file: File }, {
        headers: {
            "content-type": "multipart/form-data"
        }
    })
    img.value = res.data.data
    login.avatar = res.data.data
    await request.post('/upAvatar', {
        id: login.id,
        avatar: img.value
    })
}

const loadFileSuccess = () => {
    ElMessage({
        type: 'success',
        message: '更新成功'
    })
}

const userinfo = () => {
    router.push('/user')
}

const goLogin = () => {
    router.push('/login')
}
</script>
<template>
    <!-- 头部 -->
    <div class="header">
        <div class="logo"></div>
        <div class="navlist">
            <ul>
                <li>
                    <RouterLink active-class="active" :to="`/`">首页</RouterLink>
                </li>
                <li v-for="item in typeList" :key="item.id">
                    <RouterLink active-class="active" :to="`/category/${item.id}`">{{ item.typename }}</RouterLink>
                </li>
            </ul>
        </div>
        <div class="cart">
            <div class="username" v-if="login.id">
                <el-dropdown class="ed">
                    <span class="el-dropdown-link">
                        <el-avatar shape="square" fit="cover" :src="img" class="img" />
                        <span class="name">
                            &nbsp;{{ login.name }}
                            <el-icon>
                                <ArrowDown />
                            </el-icon>
                        </span>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu class="dm">
                            <el-dropdown-item>
                                <el-upload class="avatar-uploader" :http-request="uploadFile"
                                    :on-success="loadFileSuccess" :show-file-list="false">
                                    修改头像
                                </el-upload>
                            </el-dropdown-item>
                            <el-dropdown-item @click="userinfo">个人信息</el-dropdown-item>
                            <el-dropdown-item @click="outlogiin">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="alogin" @click="goLogin" v-else>点击登录</div>
            <div class="cartlist" @click="goCart">
                <el-icon>
                    <ShoppingCart />
                </el-icon>
                &nbsp;购物车
            </div>
        </div>
    </div>
    <el-dialog v-model="dialog" title="温馨提示" width="500">
        <span>确定退出登录吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="out">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <div class="body">
        <router-view></router-view>
    </div>
    <Footer></Footer>
</template>
<style scoped lang="scss">
.el-dropdown-link:focus {
    outline: none;
}

.header {
    display: flex;
    justify-content: space-around;
    width: 1400px;
    margin: 0 auto;
    height: 120px;
    border-bottom: 3px solid aqua;
    background-color: white;

    .logo {
        width: 160px;
        height: 100px;
        background: url("/image/logo.jpg") no-repeat center 18px / contain;
    }

    .navlist {
        display: flex;
        align-items: center;

        ul {
            display: flex;

            li {
                margin-right: 40px;
                width: 50px;

                a {
                    font-size: 20px;
                    line-height: 32px;
                    height: 32px;
                    display: inline-block;
                    font-weight: 500;
                    color: black;

                    &:hover {
                        color: aqua;
                        border-bottom: 1px solid aqua;
                    }
                }

                .active {
                    color: aqua;
                    border-bottom: 5px solid aqua;
                }
            }
        }
    }

    .cart {
        display: flex;

        &:hover {
            cursor: pointer;
        }

        .username {
            display: flex;
            align-items: center;
            width: 180px;
            height: 120px;

            .name {
                font-size: 24px;
                color: aqua;
                font-weight: 600;
                vertical-align: super;
            }
        }

        .alogin {
            display: flex;
            align-items: center;
            width: 180px;
            height: 120px;
            font-size: 24px;
            color: aqua;
            font-weight: 600;
            vertical-align: super;

            &:hover {
                color: red;
            }
        }

        .cartlist {
            display: flex;
            align-items: center;
            width: 120px;
            height: 120px;
            font-size: 24px;
            margin-left: 20px;
            color: red;
            font-weight: 600;
        }
    }
}

.body {
    width: 1400px;
    margin: 0 auto;
    background-color: white;
}
</style>